<template>
	<view class="hotelDetails">
		<!-- <image class="hotelPn" :src="baseOssUrl + 'icon/imgpn.png'" mode=""></image> -->
		<view class="" @click='goAlbum'>
			<fui-swiper-dot type="4" :items="swpItems" :current="current" :styles="styles">
				<swiper class="fui-banner__wrap" @change="swpChange" circular :indicator-dots="false" autoplay
					:interval="4000" :duration="150">
					<swiper-item v-for="(item,index) in swpItems" :key="index">
						<view class="fui-banner__item">
							<image :src="baseOssUrl2 + item.arr" mode="aspectFill" alt="" />
						</view>
					</swiper-item>
				</swiper>
			</fui-swiper-dot>
		</view>
		<view class="hotelDetaCotent marin25">
			<view class="hotel-title">
				<view class="title-text">
					<!-- 格林豪泰商务酒店（微山县微山湖国家湿
					地公园店） -->
					{{hoteldList.name}}
				</view>
				<view class="pingfen">
					4.6分
				</view>
			</view>
			<view class="hot-address" @click="gotoBnt">
				<view class="address-cont">
					<image class="addresspn" :src="baseOssUrl + 'icon/address.png' " mode=""></image>
					<!-- 微山岛铁道游击队纪念馆西南300米 -->
					{{hoteldList.address}}
				</view>
				<image class="go-address" :src=" baseOssUrl +'icon/go-address.png'" mode=""></image>

			</view>
			<view class="" class="biao-list" @click="highlights">
				<text class="biao-item" v-if="hoteldList.msBasics">
					{{hoteldList.msBasics}}
				</text>
				<text class="biao-item" v-if="hoteldList.msKitchen">
					{{hoteldList.msKitchen}}
				</text>
				<text class="biao-item" v-if="hoteldList.msLeisure">
					{{hoteldList.msLeisure}}
				</text>
				<text class="biao-item" v-if="hoteldList.msSanitary">
					{{hoteldList.msSanitary}}
				</text>
				<text class="biao-item" v-if="hoteldList.msService">
					{{hoteldList.msService}}
				</text>

			</view>
		</view>
		<!-- 房屋概览弹窗 start-->
		<bottom-popup ref="popup4" titleName='亮点说明' class="highlight-details">
			<template slot="cont">
				<view class="ligh-style" v-for="(item,index) in lighList" :key='index'>
					<view class="l-s1">
						<image :src="item.url" mode=""></image>
						{{item.name}}
					</view>
					<view class="l-s2">
						{{item.nameCont}}
					</view>
				</view>
			</template>
		</bottom-popup>
		<!-- end -->
		<!-- specific -->
		<!-- 选择时间 房型 start-->
		<view class="specificTime">
			<fui-bottom-popup :show="popupShow" @close="closePopup">
				<view class="timeHeader">
					请选择日期
					<image :src="baseOssUrl+'icon/closePn.png'" mode="" @click="closePopup"></image>
				</view>
				<view class="fui-custom__wrap">
					<fui-calendar type="3" showLunar @change="calendarChange" activeBackground='#35743D'></fui-calendar>
				</view>
				<fui-button text="完成" background="#35743D" width='96%' :margin="['0', '17rpx']" radius='50rpx'
					@click="closePopup"></fui-button>
			</fui-bottom-popup>
			<view class="flex-ruzhu" @click="showPopup">
				<!-- 日期选择 -->
				<view class="ruzhu-time" v-if="startTime">
					{{startTime}}
					<view class="ruzhu-week">
						{{startWeek}}
					</view>
				</view>
				<view class="ruzhu-time" v-else>
					{{defaultStart}}
					<view class="ruzhu-week">
						{{this.getWeekDate(this.defaultAllstart)}}
					</view>
				</view>
				<!-- 共一晚 -->
				<view class="all-time" v-if="staTimevalue">
					共{{this.getDiffDay(this.staTimevalue, this.endTimevalue)}} 晚
				</view>
				<view class="all-time" v-else>
					共1晚
				</view>

				<view class="lidian-time" v-if="endTime">
					<!-- 8月30日 -->
					{{endTime}}
					<view class="lidian-week">
						{{endWeek}}
					</view>
				</view>
				<view class="lidian-time" v-else>
					{{defaultEnd}}
					<view class="lidian-week">
						{{this.getWeekDate(this.defaultAllend)}}
					</view>
				</view>
			</view>
		</view>


		<!-- 房间内容 -->
		<view class="roomContent marin25 ">
			<view class="fui-item__box room-cont" v-for="(item,index) in roomList" :key='index'>
				<image class="img-rom" :src="baseOssUrl2 + item.image " mode="" @click='goAlbum'></image>
				<view class="room-list">
					<view class="room1">
						{{item.name}}
					</view>
					<view class="room2">
						{{hoteldList.bedType || ''}}｜{{hoteldList.roomArea || ''}}｜可住{{item.livableUser || '' }}人
					</view>
					<view class="room3">
						30分钟内免费取消
					</view>
					<view class="room4">
						<view class="room3-price">
							¥{{item.jg}} <text>/晚</text>
						</view>

						<view class="room-method" @click="bookClick(item)">
							<view class="method1">
								{{ismethod}}
							</view>
							<view class="method2">
								在线付
							</view>
						</view>
					</view>
					<!-- <view class="room5">
									优惠30元 
								</view> -->
				</view>

			</view>
		</view>

		<!-- 房屋概览弹窗 start-->
		<bottom-popup ref="popup2" titleName='房屋介绍' class="overGailan">
			<template slot="cont">
				<view class="fui-custom__over">
					亲爱的客人，欢迎来到我们的家！
					中国传统民间神话中孙悟空聪明、忠诚、嫉恶如仇、一身本领，在民间文化中代表了机智、勇敢。本片以悟空的形象去赞扬抗美援朝战争中一个平凡而伟大的老兵—涂伯毅。1950年6月25日，朝鲜战争爆发，19岁涂伯毅加入中国人民志愿军。1951年2月，一场战役中，他被敌军投掷的凝固汽油弹烧伤毁容，造成一级伤残。之后依然保持积极乐观的生活态度，义务进行爱国主义教育。虽然涂伯毅的故事没有那么荡气回肠，但却完美诠释了悟空的忠诚，勇敢。
					中国传统民间神话中孙悟空聪明、忠诚、嫉恶如仇、一身本领，在民间
				</view>
			</template>
		</bottom-popup>
		<!-- end -->
		<!-- 房屋设施 -->
		<view class="house-facilities">
			房屋设施
		</view>
		<view class="facilitiesContent marin25" @click="facilitPopup">
			<!-- v-for="(item,index) in facilitCont" :key='index' -->
			<view class="facilitA">
				<view class="facilit-name">
					<!-- {{item.name}} -->
					基础设施
				</view>
				<view class="facilit-cont">
					<view class="failc-list">
						<text>{{hoteldList.msBasics}}</text>
					</view>

				</view>
			</view>
			<view class="facilitA">
				<view class="facilit-name">
					<!-- {{item.name}} -->
					卫浴设施
				</view>
				<view class="facilit-cont">
					<view class="failc-list">
						<text>{{hoteldList.msSanitary}}</text>
					</view>

				</view>
			</view>
			<view class="facilitA">
				<view class="facilit-name">
					<!-- {{item.name}} -->
					服务
				</view>
				<view class="facilit-cont">
					<view class="failc-list">
						<text>{{hoteldList.msService}}</text>
					</view>

				</view>
			</view>
		</view>
		<!-- 房屋设施弹窗 start-->
		<bottom-popup ref="popup1" titleName='房屋设施'>
			<template slot="cont">
				<!-- <view class="facilitAP marin25" v-for="(item,index) in facilitContAll" :key='index'>
					<view class="facilit-name">
						<image :src="item.src" mode=""></image>
						{{item.name}}
					</view>
					<view class="facilit-cont">
						<view class="failc-list" v-for="(ite,inde) in item.facilList" :key='inde'>
							<image class="iswrongPn" :src="ite.url" mode=""></image>
							<text>{{ite.name}}</text>
						</view>
					</view>
				</view> -->
				<view class="facilitA">
					<view class="facilit-name">
						<!-- {{item.name}} -->
						基础设施
					</view>
					<view class="facilit-cont">
						<view class="failc-list">
							<text>{{hoteldList.msBasics}}</text>
						</view>

					</view>
				</view>
				<view class="facilitA">
					<view class="facilit-name">
						<!-- {{item.name}} -->
						卫浴设施
					</view>
					<view class="facilit-cont">
						<view class="failc-list">
							<text>{{hoteldList.msSanitary}}</text>
						</view>

					</view>
				</view>
				<view class="facilitA">
					<view class="facilit-name">
						<!-- {{item.name}} -->
						服务
					</view>
					<view class="facilit-cont">
						<view class="failc-list">
							<text>{{hoteldList.msService}}</text>
						</view>

					</view>
				</view>
				<view class="facilitA">
					<view class="facilit-name">
						<!-- {{item.name}} -->
						休闲建筑
					</view>
					<view class="facilit-cont">
						<view class="failc-list">
							<text>{{hoteldList.msLeisure}}</text>
						</view>

					</view>
				</view>
				<view class="facilitA">
					<view class="facilit-name">
						<!-- {{item.name}} -->
						厨房设施
					</view>
					<view class="facilit-cont">
						<view class="failc-list">
							<text>{{hoteldList.msKitchen}}</text>
						</view>

					</view>
				</view>
			</template>
		</bottom-popup>
		<!-- end -->

		<!--  房东介绍start  -->
		<view class="netFriend marin25">
			<view class="net-text">
				<text class="ntext">房东介绍</text>
			</view>
			<view class="net-content">
				<!-- 评论列表 -->
				<view class="content-comment marin25">
					<view class="cont-images">
						<image :src="baseOssUrl2 + swpItems[0].arr " mode=""></image>
					</view>
					<view class="persdata">
						<view class="pdata-right">
							{{hoteldList.address}}
							<view class="persdat-details">
								自然人｜实名验证｜卫生许可
							</view>
							<view class="persdat-details" @click="licensePopup">
								营业执照 <image :src="baseOssUrl +'icon/rightjt.png' " mode=""></image>
							</view>
						</view>

					</view>
					<view class="lx-landlord" @click="tellFdong(hoteldList.contactPhone)">
						联系房东
					</view>

				</view>
			</view>
		</view>
		<!-- end -->
		<!-- 营业执照 start-->
		<bottom-popup ref="popup" titleName='营业执照'>
			<template slot="cont">
				<image :src="baseOssUrl2 + hoteldList.businessLicense " mode=""></image>
			</template>
		</bottom-popup>
		<!-- end -->
		<!-- 预订须知 Booking Instructions -->
		<view class="booking-instructions ">
			预订须知
		</view>
		<view class="bookingContent marin25 ">
			<view class="book-name">
				入离时间：<i></i> <text>{{hoteldList.residenceTime.split(',')[0]}}以后入住</text> <i class='i-two'></i>
				<text>{{hoteldList.residenceTime.split(',')[1]}}之前退房</text>
			</view>
			<view class="book-cont">
				<view class="">
					押金：{{hoteldList.deposit || '无'}}
				</view>
				<!-- 	<view class="">
					加客： 允许加客人，最多加客1人，¥50/人，加客费用线下收取。
				</view> -->
				<view class="">
					其他费用： {{hoteldList.otherPrice || ''}}
				</view>
			</view>
		</view>
		<!-- 退订须知 Notice -->
		<view class="notice-instructions ">
			退订须知
		</view>
		<view class="noticeContent marin25 ">
			<view class="notice-name">
				<view class="">
					预订成功 若取消订单，30分钟内免费退回
				</view>
				<view class="">
					入住前{{hoteldList.unDate}}天18:00: 若取消订单，30分钟内免费退回
				</view>
				<!-- <view class="">
					入住当天14:00： 若取消订单，定金全部扣除
				</view> -->
			</view>

		</view>
		<!-- 价格明细 start-->
		<bottom-popup ref="popup3" titleName='价格明细'>
			<template slot="cont">
				<view class="price-details pd1">
					<text>在线明细</text>
					<text>¥488</text>
				</view>
				<view class="price-details">
					<text>2022-08-20</text>
					<text>¥488</text>
				</view>
				<view class="price-details">
					<text>2022-08-20</text>
					<text>¥488</text>
				</view>
				<view class="price-details pd1 pd2">
					<text>清洁费</text>
					<text>¥10</text>
				</view>
				<view class="lookBook lookBookO">
					<view class="price-book">
						<view class="book-yaun">
							<text class="yaun-num">¥60</text>
						</view>
						<view class="book-detailed">
							明细 <image :src="baseOssUrl + 'icon/xiajt.png' " mode=""></image>
						</view>
					</view>
					<text class="yaun-yuan">共一晚</text>
					<view class="lookbtn" @click="bookClick">
						立即预订
					</view>
				</view>
			</template>
		</bottom-popup>
		<!-- 查看房型 -->
		<!-- 		<view class="lookBook">
			<view class="price-book">
				<view class="book-yaun">
					<text class="yaun-num">¥60</text>
				</view>
				<view class="book-detailed" @click="detailedPopup">
					明细 <image :src="baseOssUrl + 'icon/topjt.png' " mode=""></image>
				</view>
			</view>
			<text class="yaun-yuan">共一晚</text>
			<view class="lookbtn" @click="bookClick">
				立即预订
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	import BottomPopup from '@/components/component/bottomPopup.vue'
	export default {
		components: {
			BottomPopup
		},
		data() {
			return {
				ydTime: '',
				ydTimes: [],
				page: 1,
				limit: 10,
				total: '',
				// dataPages: 0,
				roomList:[],
				hoteldList: [],
				titleName: '营业执照',
				baseOssUrl: baseOssUrl,
				baseOssUrl2: baseOssUrl2,
				biaoList: ['餐厅', '地暖', '空调', '热水器', '24小时前台'],
				popupShow: false,
				staTimevalue: '',
				endTimevalue: '',
				startTime: '',
				endTime: '',
				startWeek: '',
				endWeek: '',
				defaultStart: '', //默认开始时间
				defaultEnd: '', //默认结束时间
				defaultWeek: '', //默认星期
				defaultWeek1: '',
				defaultAllstart: '',
				defaultAllend: '',
				ismethod: '订',
				ringList: [{
						name: '位置',
						ringPf: '5.0',
						isPfeng: 100
					},
					{
						name: '设施',
						ringPf: '4.8',
						isPfeng: 80
					},
					{
						name: '服务',
						ringPf: '4.8',
						isPfeng: 80
					},
					{
						name: '卫生',
						ringPf: '4.8',
						isPfeng: 80
					},
				],
				changetabs: [{
					//标签显示文本（String）
					name: '酒店亮点'
				}, {
					name: '入住指南'
				}, {
					name: '酒店设施',
				}, ],
				tabFn: 0,
				houseShow: false,
				overShow: false,
				facilitShow: false,
				houseTrait: ['1张大床1.8米', '38m²', '2层', '有窗', '禁烟', '无早餐', 'WiFi'],
				policyList: [{
						name: '食品饮食 ',
						explain: '电热水壶 厨房用具免费 '
					},
					{
						name: '食品饮食 ',
						explain: '电热水壶 厨房用具免费 ,费用政策 加床：该房型不可加床 停车场'
					},
					{
						name: '食品饮食 ',
						explain: '24小时热水，独立淋浴间， 吹风机，拖鞋 洗浴用品 牙刷，牙膏，洗发水，沐浴露'
					},
					{
						name: '食品饮食 ',
						explain: '电热水壶 厨房用具免费 '
					}
				],
				// 轮播图
				swpItems: [{
					iconPath: baseOssUrl + 'icon/imgpn.png',
				}, {
					iconPath: baseOssUrl + 'icon/imgpn.png',
				}, {
					iconPath: baseOssUrl + 'icon/imgpn.png',
				}],
				current: 0,
				styles: {
					width: 50,
					right: 0,
					height: 30,
					bottom: 80,
					activeBackground: '#FFFFFF',
					activeWidth: 40,
					size: 24,
					background: 'rgba(0,0,0,.6)',
				},
				facilitCont: [{
					name: '基础设施',
					facilList: [{
						name: '无线网',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '电梯',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/cha.png'
					}, {
						name: '空调',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '洗衣机',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}]
				}, {
					name: '卫浴设施',
					facilList: [{
						name: '热水',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '独立卫浴',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '吹风机',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '洗浴用品',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}]
				}, {
					name: '周边500m',
					facilList: [{
						name: '超市',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '餐厅',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '药店',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}]
				}],
				facilitContAll: [{
					src: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/house.png',
					name: '基础设施',
					facilList: [{
						name: '无线网',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '电梯',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/cha.png'
					}, {
						name: '空调',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '洗衣机',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}]
				}, {
					name: '卫浴设施',
					src: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/house1.png',
					facilList: [{
						name: '热水',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '独立卫浴',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '吹风机',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '洗浴用品',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}]
				}, {
					name: '周边500m',
					src: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/house2.png',
					facilList: [{
						name: '超市',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '餐厅',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '药店',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}],
					src: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/house.png',
					name: '基础设施',
					facilList: [{
						name: '无线网',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '电梯',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/cha.png'
					}, {
						name: '空调',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '洗衣机',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}]
				}, {
					name: '卫浴设施',
					src: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/house1.png',
					facilList: [{
						name: '热水',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '独立卫浴',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '吹风机',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '洗浴用品',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}]
				}, {
					name: '周边500m',
					src: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/house2.png',
					facilList: [{
						name: '超市',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '餐厅',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}, {
						name: '药店',
						url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/dui.png'
					}]
				}],
				lighList: [{
					url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/b-dui.png',
					name: '立即确认',
					nameCont: '下单即有房，无需等待确认'
				}, {
					url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/b-time.png',
					name: '15分钟内免费取消',
					nameCont: '下单后15分钟内取消免收手续费'
				}, {
					url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/b-cha.png',
					name: '宽松取消',
					nameCont: '取消政策宽松无忧退订'
				}, {
					url: 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/user_file/static/images/icon/b-fp.png',
					name: '可开发票',
					nameCont: '可开发票可开发票可开发票'
				}]
			}
		},
		created() {
			this.getData()
		},
		onLoad(op) {
			console.log("op1", op)
			this.ydTime = op.ydTime
			var arr = [];
			arr = op.ydTime.split(',')
			this.ydTimes = arr
			this.startTime = op.startTime1
			this.endTime = op.endTime1
			this.staTimevalue = arr[0]
			this.endTimevalue = arr[arr.length - 1]
			console.log(arr)
			this.mId = op.mId
		},
		onShow() {
			this.getList()
		},
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效
		methods: {
			gotoBnt() {
				console.log('进入导航')
				//  经纬度暂时写死，后面介入数据
				let latitude = Number(this.hoteldList.latitude);
				let longitude = Number(this.hoteldList.longitude);
				let address = this.hoteldList.address
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {
						console.log(res, '经纬度===>')
						if (res.errMsg == "getLocation:ok") {
							console.log(latitude)
							console.log(longitude)
							uni.openLocation({
								// 传入你要去的纬度
								latitude: latitude,
								// 传入你要去的经度
								longitude: longitude,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 18,
								success: function() {
									console.log('成功的回调success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						console.log(res)
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			},
			getList() {
				//  
				this.$http.get(this.$httpApi.selectMsRoomTypeList, {
					data: {
						page: this.page,
						limit: this.limit,
						mId: this.mId,
						ydTime: this.ydTime,
					}
				}).then(res => {
					if (res.code == 0) {
						console.log(res, 'ssssssssssssssssssssssssssssssss')
						this.roomList = res.roomList
						this.roomList.forEach(item=>{
							item.image = item.tp.split(",")[0]
						})
						this.hoteldList = res.page[0]
						// this.ydTimes = JSON.parse(this.ydTime)
						let arrData = JSON.parse(res.page[0].storeImages);
						let arr = [];
						arrData.map((item, index) => {
							if (item.arr != '') {
								if (item.arr.indexOf(',') !== -1) {
									item.arr = item.arr.split(',')[0]
								}
								arr.push(item)
							}
						})
						this.swpItems = arr;

						this.total = res.total
					}
				})

			},
			// 去订单页面
			bookClick(e) {
				console.log(e, 'zheshahsawnajs')
				// var form = {
				// 	ydTime: this.ydTime,
				// 	mId: this.mId
				// 	roomIds : e.id
				// 	phone: uni.getStorageSync('userinfo').mobile
				// 	zName: this.zName
				// 	yjddTime: this.timeText
				// }
				var sb = e.id
				var moeny = e.jg
				uni.navigateTo({
					url: `/pages/orderConfimms/index?roomId=${sb}&startTime=${this.startTime}&endTime=${this.endTime}&mid=${this.mId}&moeny=${moeny}&ydTime=` +
						JSON.stringify(this.ydTimes)
				})
			},
			// 联系房东
			tellFdong(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			goAlbum() {
				console.log(11)
				uni.navigateTo({
					url: "/pages/album/index?id=" + this.mId
				})
			},
			showPopup(type) {
				console.log('type', type)
				this.popupShow = true
			},
			closePopup(type) {
				this.popupShow = false
				let arr = this.fui.getAllDate(this.staTimevalue, this.endTimevalue)
				this.ydTimes = arr
			},
			// 用户选择时间
			calendarChange(e) {
				this.ydTimes = []
				console.log('0e', e)
				// this.fui.toast(e.value.join(','))
				this.staTimevalue = e.value[0]
				this.endTimevalue = e.value[1]
				console.log('staTimevalue', e.value[0])
				console.log('endTimevalue', e.value[1])
				this.ydTimes.push(e.value[0])
				this.ydTimes.push(e.value[1])
				this.startTime = e.lunar[0].cMonth + '月' + e.lunar[0].cDay + '日'
				this.endTime = e.lunar[1].cMonth + '月' + e.lunar[1].cDay + '日'
				this.startWeek = e.lunar[0].ncWeek
				this.endWeek = e.lunar[1].ncWeek
			},
			// 当前默认时间
			getData() {
				var data = new Date()
				var neaYear = data.getFullYear()
				var newMonth = data.getMonth() + 1
				var newData = data.getDate()
				var newDatas = data.getDate() + 1
				var wk = data.getDay()
				// var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				// this.defaultWeek = weeks[wk]  
				this.defaultStart = newMonth + '月' + newData + '日'
				this.defaultEnd = newMonth + '月' + newDatas + '日'
				// -日期-
				this.defaultAllstart = neaYear + '-' + newMonth + '-' + newData
				this.defaultAllend = neaYear + '-' + newMonth + '-' + newDatas
				this.ydTimes.push(this.defaultAllstart)
				this.ydTimes.push(this.defaultAllend)
				console.log("defaultAllstart", this.defaultAllstart, this.defaultAllend)
			},
			// 获取星期
			getWeekDate(date) {
				let tm = date
				let dt = new Date(tm.replace(/-/g, '/'))
				var day = new Date(dt).getDay();
				var weeks = new Array(
					'星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
				);
				var week = weeks[day];
				return week;
			},
			// 计算两个日期之间的差值
			getDiffDay(date_1, date_2) {
				let totalDays, diffDate
				let tm1 = date_1
				let dt1 = new Date(tm1.replace(/-/g, '/'))
				let tm2 = date_2
				let dt2 = new Date(tm2.replace(/-/g, '/'))
				let myDate_1 = Date.parse(dt1)
				let myDate_2 = Date.parse(dt2)
				// 将两个日期都转换为毫秒格式，然后做差
				diffDate = Math.abs(myDate_1 - myDate_2) // 取相差毫秒数的绝对值

				totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整
				// console.log(totalDays)    

				return totalDays // 相差的天数
			},
			collapseChange(e) {
				console.log('e', e)
			},
			changeTab(e) {
				this.tabFn = e.index;
			},


			// 营业执照
			licensePopup() {
				this.$refs.popup._show();
			},
			// 房屋设施 
			facilitPopup() {
				this.$refs.popup1._show();
			},
			// 房屋概览  
			overPopup() {
				this.$refs.popup2._show();
			},
			// 明细
			detailedPopup() {
				this.$refs.popup3._show();
			},
			// 亮点
			highlights() {
				this.$refs.popup4._show();
			},

			swpChange(e) {
				this.current = e.detail.current;
			},
		},

	}
</script>

<style lang="scss" scoped>
	.hotelDetails {
		height: 100%;
		padding-bottom: 200rpx;

		image {
			width: 100%;
		}

		.hotelDetaCotent {
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-top: -60rpx;
			position: relative;
			z-index: 99;
			padding: 20rpx 28rpx;
			height: 200rpx;

			.hotel-title {
				color: #1D1D1D;
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;

				text {
					color: #7E7E7D;
					font-size: 24rpx;
				}

				.title-text {
					width: 80%;
				}

				.pingfen {
					padding: 0 8rpx;
					height: 45rpx;
					background: #35743D;
					color: #FFFFFF;
					text-align: center;
					border-radius: 25rpx 0 25rpx 25rpx;
				}
			}

			.hot-address {
				color: #7E7E7D;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				padding: 10rpx 0;

				.go-address {
					width: 40rpx;
					height: 40rpx;
				}

				.addresspn {
					width: 20rpx;
					height: 27rpx;
					margin-right: 10rpx;
				}

			}

			.biao-list {
				padding: 0 20rpx;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				overflow: hidden;
				position: relative;

				.biao-item {
					color: #B4B4B4;
					font-size: 22rpx;
					padding: 0 6rpx;
					background: #F8F8F8;
					height: 42rpx;
					margin: 10rpx;
				}
			}
		}

		// 亮点说明弹窗
		.highlight-details {
			.ligh-style {
				padding: 15rpx 32rpx;

				.l-s1 {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 5rpx;
					}

					font-size: 26rpx;
				}

				.l-s2 {
					color: #818181;
					font-size: 24rpx;
				}
			}
		}

		.specificTime {
			.timeHeader {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 0;
				position: relative;

				image {
					position: absolute;
					right: 45rpx;
					width: 20rpx;
					height: 20rpx;
				}
			}

			.flex-ruzhu {
				color: #393939;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0;
				color: #2E2E2E;
				font-size: 28rpx;

				.ruzhu-time {
					display: flex;
					align-items: center;
					line-height: 60rpx;
					margin-right: 8rpx;
					font-weight: bold;

					.ruzhu-week {
						margin-left: 8rpx;
						font-size: 20rpx;
						color: #2E2E2E;
						font-weight: 400;
					}
				}

				.all-time {
					font-size: 20rpx;
					color: #2E2E2E;
					margin: 0 14rpx;
					padding: 10rpx;
					border: 1px solid #B4B4B4;
					border-radius: 22rpx;
				}

				.lidian-text {
					font-size: 20rpx;
					line-height: 28rpx;
				}

				.lidian-time {
					color: #2E2E2E;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					line-height: 60rpx;
					font-weight: bold;

					.lidian-week {
						margin-left: 8rpx;
						font-size: 22rpx;
						color: #2E2E2E;
						font-weight: 400;
					}
				}

			}
		}

		// .specificContent {

		// 其他房型
		.other-house {
			font-size: 30rpx;
			margin-top: 30rpx;
			font-weight: bold;
		}

		// 房屋介绍
		.house-overview {
			font-size: 30rpx;
			margin: 30rpx 25rpx 10rpx 25rpx;
			font-weight: bold;
		}

		.overContent {
			background: #FFFFFF;
			padding: 30rpx 40rpx;
			border-radius: 16rpx;
			font-size: 28rpx;

			.fui-item__over {
				display: flex;
				justify-content: space-between;

				.overOne {
					font-weight: bold;
				}

				.overTwo {
					color: #717171;
					text-align: right;

					.overT-1 {
						color: #1D1D1D;
						font-weight: bold;
					}
				}
			}

			.fui-item__over1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #717171;

				.over1-1 {
					font-weight: bold;
					color: #1D1D1D;

					.over1-2 {
						font-weight: 400;
						font-size: 26rpx;
					}
				}

			}
		}

		.overGailan {


			.fui-custom__over {
				padding: 0 20rpx;
				color: #818181;
			}
		}

		// 弹窗标题×号
		.fangwu {
			font-size: 30rpx;
			font-weight: bold;
			margin: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			image {
				position: absolute;
				right: 45rpx;
				width: 22rpx;
				height: 22rpx;
			}
		}

		.facilitGailan {
			.facilitAP {
				font-size: 28rpx;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;
				background-color: #FAFAFA;
				align-items: center;
				padding: 22rpx 20rpx;

				image {
					width: 35rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}

				.facilit-name {
					width: 30%;
				}

				.facilit-cont {
					width: 70%;
					display: flex;
					flex-wrap: wrap;

					.failc-list {
						width: 200rpx;
						color: #717171;
						font-weight: 400;
						text-align: left;


					}

				}

			}
		}

		// 房屋设施
		.house-facilities {
			font-size: 30rpx;
			margin: 30rpx 25rpx 10rpx 25rpx;
			font-weight: bold;
		}

		.facilitiesContent {
			background: #FFFFFF;
			padding: 30rpx;
			border-radius: 16rpx;
			font-size: 28rpx;

			.facilitA {
				font-size: 28rpx;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.facilit-name {
					width: 30%;
				}

				.facilit-cont {
					width: 70%;
					display: flex;
					flex-wrap: wrap;

					.failc-list {
						width: 200rpx;
						color: #717171;
						font-weight: 400;
						text-align: left;

						.iswrongPn {
							width: 18rpx;
							height: 18rpx;
							margin-right: 10rpx;
						}
					}

				}

			}
		}

		.booking-instructions {
			font-size: 30rpx;
			margin: 30rpx 25rpx 10rpx 25rpx;
			font-weight: bold;
		}

		.bookingContent {
			background: #FFFFFF;
			padding: 30rpx;
			border-radius: 16rpx;
			font-size: 25rpx;
			color: #6E6E6E;
			line-height: 50rpx;
			// font-weight: bold;

			.book-name {
				display: flex;
				align-items: center;

				i {
					width: 20rpx;
					height: 20rpx;
					background-color: #35743D;
					border-radius: 50%;
					margin-right: 5rpx;
				}

				.i-two {
					margin-left: 68rpx;
				}
			}

			.book-cont {
				padding: 0 12rpx 0 0;
			}

		}

		.notice-instructions {
			font-size: 30rpx;
			margin: 30rpx 25rpx 10rpx 25rpx;
			font-weight: bold;
		}

		.noticeContent {
			background: #FFFFFF;
			padding: 30rpx;
			border-radius: 16rpx;
			font-size: 25rpx;
			color: #6E6E6E;
			line-height: 50rpx;
			// font-weight: bold;
		}

		// 折叠点击的内容部分
		.roomContent {
			margin-top: 12rpx;
			background-color: #FFFFFF;
			// border-radius: 16rpx;
			margin-bottom: 20rpx;

			border-radius: 5%;
			overflow: hidden;

			.room-cont {
				.img-rom {
					width: 25%;
					height: 192rpx;
					margin-right: 20rpx;
				}

				.room-list {
					font-size: 22rpx;
					width: 75%;
					position: relative;

					.room1 {
						color: #1D1D1D;
						font-size: 28rpx;
						font-weight: bold;
						padding: 5rpx 0;
					}

					.room2 {
						color: #7E7E7D;
						padding: 10rpx 0;
					}

					.room3 {
						color: #7E7E7D;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10rpx 0;

						.room3-price {
							color: #D93C3C;
							font-size: 30rpx;

							text {
								font-size: 22rpx;
								color: #1D1D1D;
							}
						}
					}

					.room4 {
						color: #727272;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.room-method {
							width: 70rpx;
							height: 74rpx;
							border: 1px solid #35743D;
							border-radius: 10rpx;
							text-align: center;

							.method1 {
								height: 50%;
								background-color: #35743D;
								color: #FFFFFF;

							}

							.method2 {
								color: #35743D;
							}
						}

						.room3-price {
							color: #D93C3C;
							font-size: 30rpx;

							text {
								font-size: 22rpx;
								color: #1D1D1D;
							}
						}
					}

					.room5 {
						width: 120rpx;
						height: 40rpx;
						background: #35743D;
						border-radius: 30rpx 0 30rpx 0;
						color: #FFFFFF;
						text-align: center;
						line-height: 40rpx;
						position: absolute;
						right: 0;
					}



				}
			}

			// 折叠面板
			.fui-item__box {
				width: 100%;
				padding: 26rpx 16rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
			}

			.fui-logo {
				width: 48rpx;
				height: 48rpx;
				margin-right: 24rpx;
				display: block;
			}

			// 折叠下的房间内容
			.fui-descr {
				width: 100%;
				padding: 32rpx;
				font-size: 28rpx;
				color: #7F7F7F;
				word-break: break-all;
				box-sizing: border-box;
				padding: 0 16rpx;
				position: relative;

				.fui-fold {
					background: #EFEFEF;
					font-size: 28rpx;
					padding: 14rpx;
					height: 230rpx;
					border-bottom: 1px solid #E0E0E0;

					.fold1 {
						color: #1D1D1D;
						margin: 12rpx 0;
					}

					.fold2 {
						color: #727272;
						font-size: 22rpx;
						display: flex;
						justify-content: space-between;

						.room-method {
							width: 70rpx;
							height: 74rpx;
							border: 1px solid #35743D;
							border-radius: 10rpx;
							text-align: center;

							.method1 {
								height: 50%;
								background-color: #35743D;
								color: #FFFFFF;

							}

							.method2 {
								color: #35743D;
							}
						}
					}

					.fold3 {
						.fold-price {
							color: #D93C3C;
							font-size: 30rpx;
						}

						.fold-text {
							color: #B4B4B4;
							font-size: 22rpx;
							margin-left: 10rpx;
							text-decoration: line-through;
						}

						.fold-discount {
							width: 120rpx;
							height: 40rpx;
							background: #35743D;
							border-radius: 30rpx 0 30rpx 0;
							color: #FFFFFF;
							text-align: center;
							line-height: 40rpx;
							position: absolute;
							right: 30rpx;
							font-size: 22rpx;
						}
					}
				}
			}

		}

		// 房间详情弹窗
		/* 自定义内容区样式需自行控制 */
		.fui-custom__house {
			width: 100%;
			padding-bottom: 100rpx;

			image {
				width: 100%;
				height: 370rpx;
			}

			.show-house-content {
				font-size: 32rpx;
				font-weight: bold;
				margin: 48rpx 25rpx;
				border-bottom: 1px solid #D0D0D0;

				.house-content-title {
					margin: 20rpx 0;

				}

				.house-conten-trait {
					font-size: 26rpx;
					display: flex;
					align-items: center;
					color: #9D9D9D;

					.trait-item {}


				}
			}

			.show-house-policy {
				display: flex;
				margin-bottom: 38rpx;

				.policy-name {
					width: 20%;
					font-size: 26rpx;
					color: #1D1D1D;
					font-weight: bold;
					margin-right: 20rpx;
				}

				.policy-explain {
					width: 80%;
					font-size: 24rpx;
				}
			}

			.house-type {
				font-size: 28rpx;
				font-weight: bold;

				.ht-text {
					margin-top: 12rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #1D1D1D;
				}
			}

			.policy-services {
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 64rpx;
				margin-bottom: 12rpx;

				.services-title {
					margin-top: 10rpx;
					font-size: 26rpx;

					.scontent-title {
						font-weight: 400;
						margin-top: 5rpx;
						font-size: 26rpx;
					}
				}
			}

			.merchant-services {
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 64rpx;
				margin-bottom: 12rpx;

				.tservices-title {
					margin-top: 10rpx;
					font-size: 26rpx;

					.tscontent-title {
						font-weight: 400;
						margin-top: 5rpx;
						font-size: 26rpx;
					}
				}
			}
		}

		// }

		/deep/ .fui-collapse__content-wrap {
			padding-top: 16rpx;
		}

		// 箭头 位置
		/deep/ .fui-collapse__item-ani {
			position: absolute !important;
			top: 35% !important;
			right: 10rpx !important;

		}

		.netFriend {
			padding-bottom: 30rpx;

			.net-text {
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				color: #1D1D1D;
				margin: 30rpx 0 16rpx 0;
				font-weight: bold;


			}

			.net-content {
				background: #FFFFFF;
				border-radius: 16rpx;

				.content-head {
					background-color: #EFEFEF;
					height: 160rpx;
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #35743D;

					.head-left {
						border-right: 1px solid #B4B4B4;
						width: 20%;
						text-align: center;
						font-size: 24rpx;

						.leftpf {
							font-size: 38rpx;
							font-weight: bold;
						}
					}

					.head-right {
						width: 80%;
						height: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: #35743D;
						font-size: 24rpx;
						margin-left: 40rpx;

						.right1 {
							text-align: center;
							position: relative;
							margin-right: 20rpx;


							.right-ring {
								position: absolute;
								right: 30rpx;
								top: 38rpx;
								font-size: 28rpx;
							}
						}
					}
				}

				.content-comment {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.cont-images {
						width: 20%;

						image {
							width: 100rpx;
							height: 100rpx;
							margin-right: 16rpx;
							margin-top: -30rpx;
						}
					}

					.persdata {
						width: 60%;
						margin: 24rpx 0 24rpx 0;

						.pdata-right {
							color: #1D1D1D;
							font-weight: bold;
							font-size: 26rpx;

							.persdat-details {
								color: #818181;
								font-weight: 400;

								image {
									width: 8rpx;
									height: 16rpx;
									margin-left: 10rpx;
								}
							}


						}
					}

					.lx-landlord {
						width: 20%;
						height: 50rpx;
						border-radius: 8rpx;
						background-color: #35743D;
						font-size: 22rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;

					}

					.persdat-details {
						margin: 12rpx 0;
						font-size: 28rpx;
						color: #1D1D1D;
					}

					.persdat-all {
						text-align: center;
						color: #35743D;
						font-size: 26rpx;
						padding: 10rpx 0;
					}
				}
			}
		}

		.hotelParticular {
			margin-top: 20rpx;
			padding-bottom: 120rpx;

			.htext {
				color: #1D1D1D;
				font-size: 32rpx;
				font-weight: bold;
				margin: 20rpx 0 16rpx 0;
				display: block;
			}

			.particular-content {
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;

				.pcont-tab {
					color: #1D1D1D;

					.pctab1 {
						font-size: 32rpx;
						font-weight: bold;
						margin: 48rpx 0 20rpx 0;

						.pctab1-text {
							font-size: 28rpx;
							color: #797979;
							font-weight: 400;
							margin-left: 24rpx;
						}

					}

					.pctab1-phone {
						margin: 40rpx 0;
					}

					.pctab1-guide {
						font-weight: bold;
						font-size: 32rpx;

						.pctab1-guide-text {
							font-weight: 400;
							font-size: 28rpx;
							margin: 20rpx 0 40rpx 0;
						}
					}

					.pctab1-hotel {
						font-weight: bold;
						font-size: 32rpx;

						.pb1-space {
							font-weight: 400;
							font-size: 28rpx;
							margin: 20rpx 0 40rpx 0;
						}
					}
				}
			}

		}

		// 查看房型 暂时取消掉
		.lookBook {
			background: #FFFFFF;
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0rpx;
			// right: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 999;
			font-size: 28rpx;

			.price-book {
				margin-left: 40rpx;

				.book-yaun {
					font-size: 20rpx;
					color: #B4B4B4;



					.yaun-num {
						font-size: 26rpx;
						color: #D93C3C;
						font-weight: bold;
					}
				}

				// 明细
				.book-detailed {
					font-size: 24rpx;
					text-align: right;

					image {
						width: 16rpx;
						height: 8rpx;
						margin-left: 10rpx;
						margin-bottom: 6rpx;
					}
				}

				.book-num {
					width: 120rpx;
					height: 40rpx;
					background: #35743D;
					border-radius: 30rpx 0 30rpx 0;
					color: #FFFFFF;
					text-align: center;
					line-height: 40rpx;
					font-size: 20rpx;
					font-weight: 400;
				}
			}

			.yaun-yuan {
				// text-decoration: line-through;
				// margin-right: 17rpx;
				color: #707070;
				font-size: 24rpx;
				position: absolute;
				right: 38%;
			}

			.lookbtn {
				color: #FFFFFF;
				// width: 240rpx;
				height: 72rpx;
				background-color: #35743D;
				border-radius: 38rpx;
				text-align: center;
				line-height: 72rpx;
				margin: 0 20rpx;
				padding: 0rpx 60rpx;
			}
		}

		.lookBookO {
			border-top: 1px solid #D0D0D0;
		}

		.price-details {
			padding: 7rpx 30rpx;
			color: #717171;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			line-height: 40rpx;
		}

		.pd1 {
			font-weight: bold;
			color: #1D1D1D;
		}

		.pd2 {
			padding-bottom: 80rpx;
		}
	}
</style>